<!DOCTYPE HTML>
<html>
<head>  
   	<meta name="layout" content="main_mobile">
    <title>火堆</title>       
    <link rel="stylesheet" href="${resource(dir: 'css', file: 'pay.css')}" type="text/css">
    
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>	
	<script type="text/javascript" src="${resource(dir: 'js', file: 'jquery-1.10.2.js')}" ></script>	
</head>
<body>

    <div class="ui-footer ui-footer-stable ui-btn-group ui-border-t">
        <!-- <button class="ui-btn-lg">
            拒绝
        </button> -->
        <div class="ui-f-txt">需支付<span class="price" id='price'></span></div>
        <button class="ui-btn-lg btn-red" onclick="pay()">立即支付</button>
    </div>
    
    <section class="ui-container">
    	<h2 class="title">${project?.name }</h2>
    	<!--  
        <div class="ui-placehold ui-placehold-img">
        	<g:if test="${project.img!=null}">
        		 <span style="background-image:url(/scfire/project/imgRead?img=${project.img})"></span>
        	</g:if>
        	<g:else>
        		 <span style="background-image:url(${resource(dir:'images/demo',file:'demo-poster.png')})"></span>
        	</g:else>           
        </div>
		-->
        <div class="ui-module-title ui-border-t">支付明细</div>
        <ul class="ui-list ui-list-text ui-border-tb">
            <li class="ui-border-t">
                <h4 class="ui-nowrap">捐赠金额</h4>
                <div class="ui-txt-info">${donateprice } 元</div>
            </li>
            <li class="ui-border-t" id='price_li' style="display;">
                <h4 class="ui-nowrap" style='color:#fb6e50;'>
                    <label class="ui-checkbox">
                        <input type="checkbox" id='checkboxID' onclick="sum()"/>
                    </label>
                    平台运维管理费（捐赠额的5%）
                </h4>
                <div class="ui-txt-info" id="manageCharge"></div>
            </li>
            <li class="ui-border-t" id="price_li_info" style="display;">
                <p class="ui-txt-tips">火堆是一个纯公益平台，您可以选择额外支持捐赠额的5%来维系火堆的日常运营，以便我们能够帮助更多人实现教育的梦想。</p>
            </li>
        </ul>
        
    <script type="text/javascript">
	//加载页面时候执行
	var donateprice = ${donateprice};
	var manageCharge = 0;
	var total = donateprice;
	if(donateprice >= 1){
		manageCharge = (donateprice*5/100).toFixed(2);
		//$("#price_li").css("display","");
		//$("#price_li_info").css("display","");
	}else{
		//checkbox disabled
		//$("#checkboxID").css("disabled");
		$("#price_li").css("display","none");
		$("#price_li_info").css("display","none");
		document.getElementById("checkboxID").disabled=true
	}
	if(donateprice >= 1 && document.getElementById("checkboxID").checked){
		total = parseFloat(donateprice)+parseFloat(manageCharge);
		
	}
	$("#price").html(total+"<i>元</i>");
	$("#manageCharge").html(manageCharge+"<i>元</i>");
	function sum(){
		if(document.getElementById("checkboxID").checked){
			if(donateprice >= 1){
				total = parseFloat(donateprice)+parseFloat(manageCharge);
				$("#price").html(total+"<i>元</i>");
			}else{
				$("#price").html(donateprice+"<i>元</i>");
			}
		}else{
			$("#price").html(donateprice+"<i>元</i>");
		}
	}
</script>

         <div class="ui-module-title ui-border-t">请选择支付方式</div>
         <div class="ui-form ui-border-tb" style="padding: 10px 0 20px;">
            <form action="#">
                <div class="ui-form-item ui-form-item-radio">
                    <p><img src="${resource(dir:'images',file:'img-pay-1.jpg')}" alt="">微信支付</p>
                    <label class="ui-radio" for="radio">
                        <input type="radio" name="radio" checked>
                    </label>
                </div>
                <div class="ui-form-item ui-form-item-radio">
                    <p><img src="${resource(dir:'images',file:'img-pay-2.jpg')}" alt="">支付宝支付</p>
                    <label class="ui-radio" for="radio">
                        <input type="radio" name="radio">
                    </label>
                </div>
                <div class="ui-form-item ui-form-item-radio ui-border-t">
                	<p class="txt-pay-hint">众安保险提供账户安全与法律费用综合保险保障</p>
                </div>
                <!--  
                <div class="ui-form-item ui-form-item-radio">
                    <p><img src="${resource(dir:'images',file:'img-pay-3.jpg')}" alt="">银联支付</p>
                    <label class="ui-radio" for="radio">
                        <input type="radio" name="radio">
                    </label>
                </div>
                -->
            </form>
        </div>
    </section>
    


    <script type="text/javascript">

	    wx.config({
	 	    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
	 	    appId: '${appid}', // 必填，公众号的唯一标识
	 	    timestamp: "${timestamp}", // 必填，生成签名的时间戳
	 	    nonceStr: '${nonceStr}', // 必填，生成签名的随机串
	 	    signature: '${signature}',// 必填，签名，见附录1
	 	    jsApiList: ['checkJsApi','chooseWXPay']
	 	});
	 	
        (function() {
            
        })();

		function pay(){
			 var choose = document.getElementsByName("radio");
			 var type = 0 ;
			 for(var i=0;i<choose.length;i++){
				 if(choose[i].checked){
				 	type = i;
				 }
			 }
			 
			 var total_money = ${donateprice};
			 if(document.getElementById("checkboxID").checked &&total_money >= 1){

				 total_money = parseFloat(donateprice)+parseFloat(manageCharge);
			 }
			 var checked = document.getElementById("checkboxID").checked;
			 if(type == 0){
				 $.ajax({
		             type: "post",
		             url: "/scfire/pay/order",
		             data: {
		            	 body:'捐赠金额',
			             detail:'捐赠金额',
		            	 total_fee:total_money,
		            	 projectid:${project.id},
		            	 subprojectid:${subprojectid},
		            	 checked:checked,
		            	 donate_fee:donateprice,
		            	 operate_fee:manageCharge
		             },
		             dataType: "json",
		             async : true,
		             success:function(data){
						wx.chooseWXPay({
	                        timestamp: data.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
	                        nonceStr: data.nonce_str, // 支付签名随机串，不长于 32 位
	                        package: 'prepay_id='+data.prepay_id, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
	                        signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
	                        paySign: data.paySign, // 支付签名
	                        success: function (res) {
	                        	 window.location.href='/scfire/donate/donateElectronicInfo2?donate_fee='+donateprice+"&projectid="+${project.id}+"&donateNoNew="+data.donateNoNew;
	                        },
	                        error : function (res){
		                        //alert(res+"---------------");
		                        //alert(JSON.Stringfy(res));
		                    }
	                    });   
						console.log(wx);
						//是否需要跳转？
						//window.location.href='/scfire/user/userCenterDetail?detail=mydonate'
			         },
			         error:function(data){
						alert("支付失败.");
				     }
				});
			 }
			 else if(type == 1){
				 window.location.href = "/scfire/pay/alipayExplain?total_fee="+total_money+"&projectid="+${project?.id}+"&memberid="+${user.id}+"&checked="+checked+"&donate_fee="+donateprice+"&operate_fee="+manageCharge+"&subprojectid="+${subprojectid};
			}
			 else if(type == 2){
				alert("银联支付");
			}
		}
    </script>
</body>
</html>